vue2.0和vue3.0中自定义指令（directive）的区别

您所在的位置：网站首页 › vue3 自定义指令 updated › vue2.0和vue3.0中自定义指令（directive）的区别

vue2.0和vue3.0中自定义指令（directive）的区别

2023-08-18 10:29| 来源: 网络整理| 查看: 265

使用自定义指令

组件中注册

全局中注册

小坑

自定义指令中的参数

vue2.0和vue3.0中的区别

其他区别 ===》 vue2.0和vue3.0中语法的区别

自定义指令是什么？类似于vue中的v-for v-if v-model...类似的指令语法，自定义指令是自己注册的指令

为什么使用自定义指令？对于现有的指令需求达不到目的，有时候需要对DOM进行其他操作，用自定义扩展更多的功能

使用自定义指令 vue2.0 组件中注册 export default { directives: { focus: { // 自定义指令的名字 // 下面每个方法都是一个钩子函数 // el代表当前绑定的dom元素 bind: (el, binding) => { el.value = 56 // 可以赋值不能使用方法 console.log('bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。') }, inserted: (el, binding) => { el.focus() // 可以使用方法 console.log('inserted:被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。') }, update: (el, binding) => { console.log('update:被绑定元素所在模板更新时调用,模板还没更新完成') }, componentUpdated: (el, binding) => { console.log('componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。') }, unbind: (el, binding) => { console.log('unbind:只调用一次，指令与元素解绑时调用。') } } } } 全局中注册 Vue.directive('focus', { inserted: function (el, bind) { el.focus() console.log(el, bind) } })

具有高端b格写法(利用插件的形式)

export default { install (Vue) { Vue.directive('focus', { inserted: function (el, bind) { el.focus() console.log(el, bind) } }) } } //main.js import directive from './views/directive' Vue.use(directive) Vue3.0 import { createApp } from 'vue' const app = createApp({}) // 注册 app.directive('my-directive', { // 指令是具有一组生命周期的钩子： // 在绑定元素的 attribute 或事件监听器被应用之前调用 created (el, binding) {}, // 在绑定元素的父组件挂载之前调用 beforeMount (el, binding) {}, // 绑定元素的父组件被挂载时调用 mounted (el, binding) {}, // 在包含组件的 VNode 更新之前调用 beforeUpdate (el, binding) {}, // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用 updated (el, binding) {}, // 在绑定元素的父组件卸载之前调用 beforeUnmount (el, binding) {}, // 卸载绑定元素的父组件时调用 unmounted (el, binding) {} }) // 注册 (功能指令) app.directive('my-directive', () => { // 这将被作为 `mounted` 和 `updated` 调用 }) 小坑

vue3.0中我们通过vue-cli生成的脚手架中的main.js是这么写的

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)

createApp(App).use(store).use(router).use(components).mount('#app')

注册全局指令

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App) //cv过来的代码第一次定义createApp(App)

app.directive('blue', {

mounted (el, binding) {

console.log(el, binding)

}

})

createApp(App).use(store).use(router).use(components).mount('#app') //错误代码

上面又是一个createApp(App) 相当于后面的给前面的替换掉了也就相当于没有定义自定义指令修改记得改成app

app.use(store).use(router).use(components).mount('#app')

import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.directive('blue', { mounted (el, binding) { console.log(el, binding) } }) app.use(store).mount('#app')

具有高端b格写法(利用插件的形式)

directive.js

export default { install (app) { app.directive('test', { mounted (el, binding) { console.log(el, binding) } }) } }

main.js

import directive from '@/directive/index' const app = createApp(App) app.use(directive)

dom使用

自定义指令中的参数 el：指令所绑定的元素，可以用来直接操作 DOM。binding：一个对象，包含以下 property： name：指令名，不包括 v- 前缀。value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

常用

① el 获取dom进行操作

② binding中的value属性通过binding.value拿到自定义指令中传过来的值 v-test="1" ===binding.value

小demo 把当前元素设为绝对定位并移动指定的top值

directive/index.js

export default { install (app) { app.directive('top', { mounted (el, binding) { console.log(el, binding) el.style.position = 'absolute' el.style.top = binding.value + 'px' } }) } }

main.js

import directive from '@/directive/index' const app = createApp(App) app.use(directive)

dom

vue2.0和vue3.0中的区别

vue2.0中和vue3.0中自定义指令的原理是一致的，只是生命周期钩子函数不同

vue2中绑定的钩子函数为

bind - 指令绑定到元素后发生。只发生一次。inserted - 元素插入父 DOM 后发生。update - 当元素更新，但子元素尚未更新时，将调用此钩子。componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。

将钩子函数的命名与生命周期的钩子函数命名相一致

bind → beforeMountinserted → mountedbeforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。componentUpdated → updatedbeforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。unbind -> unmounted

【本文地址】

vue2.0和vue3.0中自定义指令（directive）的区别

vue2.0和vue3.0中自定义指令（directive）的区别

今日新闻

推荐新闻